<template>
    <div>
       <Row type="flex" justify="space-between" align="middle">
            <Col span="15" class="title">“{{role.name}}”分配权限</Col>
       </Row>
       <div class="table-box" style="overflow: auto;">
            <div style="margin: 0 0 25px 15px;overflow: auto" :style="{height: height + 'px'}">
                <PermissionTree :tree="treeData" :keys="treeKeys"></PermissionTree>
            </div>
           <div style="margin-left: 10px;">
               <Button type="primary" @click="handleSubmit">提交勾选</Button>
           </div>
       </div>
    </div>
</template>
<script>
    import PermissionTree from '@/components/permissionTree/permissionTree.vue'

    export default {
        components:{
            PermissionTree
        },
        data () {
            var params = this.$route.query;
            var height = this.$util.getClientHeight()-64-51-30-58-15-47-15;

            params.id = parseInt(params.id);

            return {
                height: height,
                role: params,
                permissionArr: null,
                menuList: null,
                treeData: [],
                treeKeys: {
                    id: 'id',
                    name: 'name',
                    children: 'children'
                }
            };
        },
        watch: {
        },
        created: function () {
            this.getMenuList(); // 获取菜单信息列表
        },
        methods: {
            handleSubmit () {
                var that = this;

                that.$loading.show('更新中');
                that.$util.ajax({
                    that: that,
                    url: '/role/assignpermissions/',
                    data: {
                        roleId: that.role.id,
                        arrMenuId: that.getCheckedArr()
                    },
                    success: function(data){
                        that.$router.go(-1);
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function(){
                        that.$loading.hide();
                    }
                });
            },
            // 获取角色组的菜单信息列表
            getPermissions(){
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/role/getpermissions/',
                    data:{
                        roleId: that.role.id
                    },
                    success: function(data){
                        that.permissionArr = data.data;
                        // 处理已经勾选的权限
                        that.checkedPermissions();
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function (){
                        that.$loading.hide();
                    }
                })
            },
            // 获取菜单信息列表
            getMenuList(){
                var that = this;
                that.$util.ajax({
                    that: that,
                    url: '/menu/menulist/',
                    success: function(data){
                        that.addMenuProperty(data.data);

                        // 获取角色组的菜单信息列表
                        that.getPermissions(); 
                    },
                    fail: function(msg){
                        that.$Message.info(msg);
                    },
                    complete: function (){
                        that.$loading.hide();
                    }
                })
            },
            // 处理返回的菜单信息，添加title和expand属性
            addMenuProperty(data){
                var len = data.length;

                // 添加title和expand属性
                for(var i=0; i<len; i++){
                    data[i].title = data[i].name;
                    data[i].expand = true;
                }
                
                this.menuList = data;
            },
            // 处理已经勾选的权限
            checkedPermissions (){
                var permissionArr = this.permissionArr;
                var permissionObj = {};
                var menuList = this.menuList;

                // 数组转化为对象
                var len = permissionArr.length;
                for(var i=0; i<len; i++){
                    var item = permissionArr[i];
                    permissionObj[item.id] = item;
                }

                // checked设置
                var len = menuList.length;
                for(var i=0; i<len; i++){
                    var item = menuList[i];
                    if(permissionObj[item.id]){
                        item.checked = true;
                    }
                    else{
                        item.checked = false;
                    }
                }

                this.treeData = this.$util.arrToTree(menuList, {id:'id', parentId: 'parent_id'});
            },
            // 获取checked数据
            getCheckedArr(){
                var treeData = this.treeData;
                var checkedDataIdArr = [];

                foreachTree(treeData);

                // 遍历tree结构
                function foreachTree(tree){
                    var len = tree.length;
                    for(var i=0; i<len; i++){
                        var item = tree[i];
                        if(item.checked){
                            checkedDataIdArr.push(item.id);
                        }
                        foreachTree(tree[i].children);
                    }
                }

                return checkedDataIdArr;
            }
        }
    }
</script>
<style scoped>

</style>